<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta property="og:title" content="<?php echo $this->alldata[0]['prod_name']; ?>" />
        <meta property="og:type" content="website" />       
        <?php
            $images = $this->alldata[0]['images'];
            $images = explode(",", $images);
        ?>
        <meta property="og:image" content="<?php echo PRODUCTS_PATH; ?>/<?php echo $images[0]; ?>" />      
        <meta property="og:url" content="<?php echo APPLICATION_URL; ?>/product/detail/product_id/<?php echo $this->alldata[0]['rkn_prod_id']; ?>" />

        <title>Raeken New</title>
        <link rel="stylesheet" href="<?php echo BOOTSTRAP_PATH; ?>/css/bootstrap.css"/>
        <link rel="stylesheet" href="<?php echo BOOTSTRAP_PATH; ?>/css/bootstrap-theme.css"/>
        <link rel="stylesheet" href="<?php echo CSS_PATH; ?>/style.css"/>
        <script type="text/javascript" src="<?php echo JS_PATH; ?>/jquery.min.js"></script>
        <script type="text/javascript">
            var baseUrl = "<?php echo APPLICATION_URL; ?>";
        </script>
    </head>
    <body>
        <div class="product-detail-popup product-detail-grid-block" >
            <div class="product-and-scroller text-center" style="float:left;width:332px;">
                <ul class="bxslider">
                    <?php
                        foreach ($images as $iVal)
                        {
                            ?>
                            <li><img src="<?php echo PRODUCTS_PATH; ?>/<?php echo $iVal; ?>" data-zoom-image="<?php echo PRODUCTS_PATH; ?>/<?php echo $iVal; ?>" style="height:300px;width:332px;"/></li>
                            <?php
                        }
                    ?>
                </ul>

                <div id="bx-pagers">
                    <?php
                        foreach ($images as $iVal)
                        {
                            ?>
                            <a data-slide-index="0" href=""><img src="<?php echo PRODUCTS_PATH; ?>/<?php echo $iVal; ?>" /></a>
                            <?php
                        }
                    ?>
                </div>
            </div>
            <?php
                $size = explode(',', $this->alldata[0]['size']);
                $stock = $this->alldata[0]['size_json'];
                $stock = (array) json_decode($stock);
            ?>
            <script type="text/javascript">
                var sizeQty = [];
                var sizeqty =  JSON.parse('<?php echo $this->alldata[0]['size_json']; ?>');
                for(var i in sizeqty){
                    sizeQty[i] = sizeqty[i];
                }
            </script>

            <div class="product-middle-section product-block vertical-scroller" style="position:relative;overflow:hidden;height:500px;">
                <p class="product-title"><?php echo $this->alldata[0]['prod_name']; ?></p>
                <p class="review-text">
                    <span class="raty" data-score="<?php echo round($this->reviewdata[0]['avg_review']); ?>" style="vertical-align: text-bottom;"></span>
                    <?php echo count($this->reviewdata); ?> Review(s) | <a href="#" class="colorbox-inline" rel="review-popup" style="color: #969DA5;">Add your review</a></p>

                <div class="availability-section">
                    <p><span class="info-title">Availability:</span><span class="color-orange instock"><?php echo $stock[$size[0]] > 0 ? 'Instock' : 'Out of stock'; ?></span></p>
                    <p><span class="info-title">Product Code:</span><?php echo $this->alldata[0]['prod_code']; ?></p>

                    <hr/>

                    <p class="product-desc-title">Product Description</p>
                    <p class="product-desc-text"><?php echo $this->alldata[0]['short_desc']; ?></p>

                    <hr/>

                    <p class="price-text">$<?php echo $this->alldata[0]['price']; ?></p>

                    <div class="cart-options">
                        <form action="<?php echo $this->baseUrl('product/addtocart') ?>">
                            <input type="hidden" name="product_id" class="product_id" value="<?php echo $this->alldata[0]['rkn_prod_id']; ?>"/>
                            <input type="hidden" name="brand_id" class="product_brand_id" value="<?php echo $this->alldata[0]['brand_id']; ?>"/>
                            <input type="hidden" name="color" class="product_color" value="<?php $color = explode(',', $this->alldata[0]['color']);
                    echo $color[0];
                    ?>"/>
                            <p>Quantity:</p>

                            <div class="btn-group">
                                <button type="button" class="btn btn-default prod-quant-dec-btn" data-quantity = "<?php echo $stock[$size[0]]; ?>" onclick="decrementQuantity(this);">-</button>
                                <input type="text" name="quantity" class="btn btn-default prod-quant-input" value="<?php echo ($stock[$size[0]]) ? '1' : '0'; ?>"/>
                                <button type="button" class="btn btn-default prod-quant-inc-btn" data-quantity = "<?php echo $stock[$size[0]]; ?>" onclick="incrementQuantity(this);">+</button>
                            </div>

                            <p>Color:</p>
                            <div class="colors" style="width:45px;">
                                <?php
                                    $color = explode(',', $this->alldata[0]['color']);
                                    if (count($color) > 0)
                                        foreach ($color as $cVal)
                                        {
                                            ?>
                                            <span style="background-color: <?php echo $cVal; ?>;" id="<?php echo $cVal; ?>" class="active"></span>
                                            <?php
                                        }
                                ?>
                            </div>

                            <br/>

                            <p>Size:</p>
                            <select class="size-select" name="size" onchange="updatestock(this.value)">
                                <?php
                                    if (count($size) > 0)
                                        foreach ($size as $sVal)
                                        {
                                            ?>
                                            <option value="<?php echo $sVal; ?>"><?php echo $sVal; ?></option>
                                            <?php
                                        }
                                ?>
                            </select>

                            <br/>
                            <br/>
                            <button type="submit" class="add-to-cart <?php echo $stock[$size[0]] ? '' : 'hide'; ?>">Add to cart</button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
        <script type="text/javascript" src="<?php echo JS_PATH; ?>/perfect-scrollbar-new.js"></script>
        <script type="text/javascript" src="<?php echo JS_PATH; ?>/../bxslider/jquery.bxslider.min.js"></script>
        <script type="text/javascript" src="<?php echo BOOTSTRAP_PATH; ?>/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="<?php echo JS_PATH; ?>/../raty/js/jquery.raty.js"></script>
        <script type="text/javascript" src="<?php echo JS_PATH; ?>/../elevatezoom/jquery.elevatezoom.js"></script>
        <!--<script type="text/javascript" src="<?php echo JS_PATH; ?>/../colorbox/jquery.colorbox-min.js"></script>-->
        <script type="text/javascript" src="<?php echo JS_PATH; ?>/function.js"></script>
        <!--<script type="text/javascript" src="<?php echo JS_PATH; ?>/custom.js"></script>-->
        <!--<script type="text/javascript" src="<?php echo APPLICATION_URL; ?>/assets/loading/loading-overlay.js"></script>-->
        <!--<link href="<?php echo APPLICATION_URL ?>/assets/loading/loading-overlay.css" rel="stylesheet">-->
        <script type="text/javascript" src="<?php echo JS_PATH; ?>/custom-popup.js"></script>
    </body>
</html>